<template>
  <div>
    <el-input v-show="false" v-model="rowData" readonly/>
    <el-tooltip class="item" content="商品编码" placement="bottom">
      <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="openDia"/>
    </el-tooltip>

    <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"

      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="分类选择"
      width="75%"
      @opened="searchHandle"
    >
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :inline="true" :model="search" size="mini" >
          <el-form-item prop="taxType" label="类别">
            <r-select v-model="search.taxType" type="1640" class="search-input" />
          </el-form-item>
          <el-form-item prop="taxCode" label="分类代码">
            <el-input v-model="search.taxCode" class="search-input" />
          </el-form-item>
          <el-form-item prop="taxName" label="分类名称">
            <el-input v-model="search.taxName" class="search-input" />
          </el-form-item>

          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">税务分类维护</div>
        </div>
        <!-- 用户列表 -->
        <BaseTable ref="table" highlight-current-row @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @current-change="select" >
          <el-table-column label="序号" type="index" />
          <el-table-column :show-overflow-tooltip="true" prop="TAX_TYPE" label="类别" min-width="100">
            <template slot-scope="scope">
              <filtercode v-model="scope.row.TAX_TYPE" type="1640"/>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="TAX_CODE" label="商品编码" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="TAX_NAME" label="货物和商品名称" min-width="200"/>
          <el-table-column :show-overflow-tooltip="true" prop="TAX_EXPLAIN" label="说明" min-width="100"/>
          <el-table-column prop="TAX_RATE" label="税率" min-width="80"/>
          <el-table-column :show-overflow-tooltip="true" prop="TAX_STANDARD" label="规格" min-width="100"/>
          <el-table-column prop="IS_DEFAULT" label="是否默认" min-width="80">
            <template slot-scope="scope">
              <filtercode v-model="scope.row.IS_DEFAULT" type="1004"/>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="REMARK" label="备注" min-width="120"/>
          <el-table-column prop="IS_DELETE" label="是否有效" min-width="80">
            <template slot-scope="scope">
              <filtercode v-model="scope.row.IS_DELETE" type="1004"/>
            </template>
          </el-table-column>

        </BaseTable>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <!-- <span slot="footer" class="dialog-footer"> -->
        <el-button type="primary" @click="confirmHandle" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>

        <!-- </span> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryTaxClassByType } from '@/api/capitalsettle/electronicinvoice/icinvoice'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
export default {
  name: 'SelectSoNo',
  components: {
    BaseTable,
    filtercode,
    rSelect

  },
  mixins: [formMixins],
  props: {
    rowData: {
      type: Array,
      default: function() {
        return []
      }
    },
    rowIndex: String
  },
  data() {
    return {
      dialogFormVisible: false,
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        order: 'asc',
        sort: 'TAX_TYPE',
        taxType: '',
        taxCode: '',
        taxName: ''
      }
    }
  },

  computed: {},
  mounted() {
    // this.searchHandle();
  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      const type = this.rowData.detailType
      queryTaxClassByType(type, this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    openDia() {
      this.dialogFormVisible = true
      this.searchHandle()
    },
    cancel() {
      this.dialogFormVisible = false
    },

    // 发票订单选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择数据!'
        })
      } else {
        debugger
        this.multipleSelection.rowIndex = this.rowIndex
        this.$emit('getTaxClass', this.multipleSelection)
        this.dialogFormVisible = false
      }
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
